<template>
  <view class="my">
    <!-- 用户资料 -->
    <view class="user-box">
      <view class="img" @tap="toUserSettings">
        <image :src="userInfo.avatar || 'https://mm.wentsoft.com/images/head-sculpture.png'" />
      </view>
      <view v-if="!hasLogin" class="text-box" @tap="toLogin">
        <view class="name">立即登录</view>
      </view>
      <view v-if="hasLogin" class="text-box" @tap="toUserSettings">
        <view v-if="!!userInfo.nickname" class="name">{{ userInfo.nickname }}</view>
        <view v-else class="name">{{ userInfo.username }}</view>

        <u--text v-if="!!userInfo.phone" mode="phone" format="encrypt" :text="userInfo.phone" />
      </view>
    </view>

    <!-- 我的订单 -->
    <view class="my-con my-orders">
      <view class="tit" @tap="toMyOder(0)">
        <view class="text">我的订单</view>
        <view class="more text-arrow">全部</view>
      </view>
      <view class="con-box">
        <view v-for="(item, index) in orderList" :key="index" class="item" @tap="toMyOder(index)">
          <view class="img">
            <image :src="item.icon" />
            <view v-if="orderCountInfo.unPay && item.name==='待付款'" class="mark">{{ orderCountInfo.unPay }}</view>
            <view v-else-if="orderCountInfo.payed && item.name==='待发货'" class="mark">{{ orderCountInfo.payed }}</view>
            <view v-else-if="orderCountInfo.consignment && item.name==='待收货'" class="mark">{{ orderCountInfo.consignment }}</view>
          </view>
          <view class="text">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <!-- 我的工具 -->
    <view class="my-con my-tools">
      <view class="tit">
        <view class="text">我的工具</view>
      </view>

      <u-grid v-if="toolList.length>0" col="4">
        <u-grid-item v-for="(item, index) in toolList" :key="index" custom-style="margin-top: 40rpx;" @click="open">
          <image class="grid-img" :src="item.icon" />
          <text class="grid-title">{{ item.name }}</text>
        </u-grid-item>
      </u-grid>
    </view>

  </view>
</template>

<script>
import { appSettingList } from '@/api/api1'
export default {
  data() {
    return {
      toolList: [],
      orderList: [],
      orderCountInfo: '',
      userInfo: {},
      hasLogin: false
    }
  },
  computed: {},
  onLoad() {
    this.userInfo = this.$store.getters.userInfo
    this.hasLogin = this.$store.getters.hasLogin
    this.loadToolsData()
    // return uni.$u.route('/pages/users/qrcodeBillXgl/qrcodeBillXgl')
  },

  onShow() {
    this.userInfo = this.$store.getters.userInfo
    this.hasLogin = this.$store.getters.hasLogin
    if (this.$store.getters.hasLogin) {
      // 加载订单数据
      this.loadOrderCountFun()
    } else {
      this.simpleInfo = {}
      this.orderCountInfo = {
        unPay: 0,
        payed: 0,
        consignment: 0
      }
    }
    // cartCount.getCartCount()
  },

  methods: {
    loadToolsData() {
      appSettingList({ type: 4, status: true }).then(res => {
        this.toolList = res.data
      })
      appSettingList({ type: 6, status: true }).then(res => {
        this.orderList = res.data
      })
    },
    /**
     * 计算各个订单数量
     */
    loadOrderCountFun() {
      this.orderCountInfo = {
        unPay: 10,
        payed: 10,
        consignment: 10
      }
    },
    // 去登陆
    toLogin() {
      uni.$u.route('/pages/users/login/index')
    },
    // 去用户设置
    toUserSettings() {
      uni.$u.route('/pages/users/userSettings/userSettings')
    },
    // 去我的余额
    toMyBalance() {
      uni.$u.route('/pages/my-balance/my-balance')
    },
    // 去我的订单
    toMyOder(index) {
      uni.$u.route(this.orderList[index].link, { orderStatus: index + 1 })
    },
    open(i) {
      if (!this.$store.getters.hasLoginAndHasMallInfo) {
        return uni.$u.route('/pages/users/login/index')
      }
      uni.$u.route(this.toolList[i].link)
    }

  }
}
</script>

<style lang="scss" scoped>
@import './user.css';
.my {
  background: #f2f3f7;
  height: calc(100vh);
  .my-con {
    background: #fff;
    padding: 30rpx 0;
    margin: 30rpx;
    border-radius: 10rpx;
    .tit {
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      .text {
        font-weight: 600;
        font-size: 28rpx;
      }
      .more {
        color: #999;
      }
      .text-arrow::after {
        border-top: 2rpx solid #999;
        border-right: 2rpx solid #999;
        top: 44%;
      }
    }
  }
}

.grid-img {
  width: 40rpx;
  height: 40rpx;
}
.grid-title {
  margin-top: 16rpx;
  color: #999;
}
</style>
